<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Home</title>

    <script src="../public/vue/dist/vue.min.js"></script>
    <!-- Bootstrap CSS -->
    <link href="../public/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="../public/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="../public/bootstrap/dist/js/bootstrap.min.js"></script>


    <link rel="stylesheet" href="../public/summernote/dist/summernote.css">
    <!-- <link rel="stylesheet" href="../public/summernote/dist/summernote-bs4.css"> -->

    <script src="../public/summernote/dist/summernote.js"></script>
    <script src="../public/summernote/dist/lang/summernote-zh-CN.js"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>



    <div class="container" style="margin:20px auto;" id="articleDetailApp">




        <form class="navbar-form pull-right">
            <button type="button" onclick="window.close();" class="btn btn-link">返回</button>
        </form>


        <div class="clearfix">

        </div>

        <form role="form">
            <div class="form-group">
                <label for="">名称</label>
                <input type="text" class="form-control" v-model="enoteForm.sname">
            </div>

            <div class="form-group">
                <label for="">简介</label>

                <textarea class="form-control" name="content" cols="60" rows="5" v-model="enoteForm.snote">{{enoteForm.snote}}</textarea>
            </div>

            <!-- <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-default">保存</button>
                    </div>
                </div> -->
        </form>


        <button type="button" @click="fnClear" class="btn btn-success">添加</button>
        <template v-for="item in edetailList" :key="item.id">
            <button type="button" @click="fnDetailModal(item)" class="btn btn-link">{{item.sname}}</button>
        </template>
        


        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">



                </h3>
            </div>
            <div class="panel-body">



                <form role="form">


                    <div class="form-group">


                        <label class="pull-right" for=""><button type="button" @click="fnSaveEdetail" class="btn btn-primary">save</button></label>

                    </div>


                    <div class="form-group" v-show="false">
                        <label for="">enoteId</label>

                        <input type="text" readonly="" class="form-control" v-model="edetailForm.enoteId">

                    </div>
                    <div class="form-group" v-show="false">
                        <label for="">_id</label>

                        <input type="text" readonly="" class="form-control" v-model="edetailForm._id">

                    </div>
                    <div class="form-group">
                        <label for=""><span class="text-danger">*</span>排序号</label>

                        <input type="text" name="" class="form-control" v-model="edetailForm.orderNo">

                    </div>
                    <div class="form-group">
                        <label for=""><span class="text-danger">*</span>标题</label>

                        <input type="text" name="" class="form-control" value="" v-model="edetailForm.sname">

                    </div>

                    <div class="form-group">
                        <label for=""><span class="text-danger">*</span>内容</label>
                        <textarea class="form-control" id="summernote1" name="content" cols="60" rows="5" v-model="edetailForm.snote"></textarea>
                    </div>



                    <button type="button" @click="fnSaveEdetail" class="btn btn-primary">保存</button>
                </form>


            </div>
        </div>





    </div>


</body>

</html>

<script>
    var vm = new Vue({
        el: '#articleDetailApp',
        data: {
            enoteForm: {},
            
            edetailForm: {
                orderNo: 1,
                enoteId: '',
            },

            edetailList:[],
        },
        methods: {


            getQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },

            getEnote() {

                var _self = this;

                var _id = this.getQueryString("_id");
                $.ajax({
                    crossDomain: true,
                    type: "get",
                    url: "../enotes/" + _id,
                    // data: {
                    //     _id: _id
                    // },
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            _self.enoteForm = response.dat;
                            _self.edetailForm.enoteId = _id;
                            // $('#summernote1').summernote('code', _self.enoteForm.stext);
                        }

                    }
                });
            },
            
            //获取 对应的 detail
            queryEdetail () {

                var _self = this;

                var _id = this.getQueryString("_id");
                $.ajax({
                    crossDomain: true,
                    type: "get",
                    url: "../edetails/" ,
                     data: {
                         enoteId: _id
                     },
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            _self.edetailList = response.dat;
                        }

                    }
                });
            },


            fnSaveEdetail () {

                var _self = this;

                var postUrl = '../edetails/add';

                if(this.edetailForm._id){
                    postUrl = '../edetails/update';
                }


                this.edetailForm.snote = $('#summernote1').summernote('code');
                $.ajax({
//                    crossDomain: true,

                    type: "post",
                    url: postUrl ,

                    data: _self.edetailForm,
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            _self.edetailForm = response.dat;
                            _self.queryEdetail();
                        }

                    }
                });
            },


            fnDetailModal(obj){
                this.edetailForm = obj;
                $('#summernote1').summernote('code', this.edetailForm.snote);
            },


            //新增 一个 note
            fnClear(){

                var enoteId = this.edetailForm.enoteId;

                this.edetailForm = {
                    enoteId: enoteId,
                    orderNo: 1,
                    snote: '',
                    sname: '',
                };
                $('#summernote1').summernote('code', '');
            },

            initSummernote() {

                $('#summernote1').summernote({

                    lang: 'zh-CN',
                    // placeholder: placeholder,
                    minHeight: 300,
                    dialogsFade: true, // Add fade effect on dialogs
                    dialogsInBody: true, // Dialogs can be placed in body, not in
                    // summernote.
                    // disableDragAndDrop: false,// default false You can disable drag
                    // and drop
                    callbacks: {
                        onImageUpload: function (files, editor, $editable) {

                            // FormData，新的form表单封装，具体可百度，但其实用法很简单，如下
                            var data = new FormData();

                            // 将文件加入到file中，后端可获得到参数名为“file”
                            data.append("uploadFile", files[0]);

                            // ajax上传
                            $.ajax({
                                data: data,
                                type: "POST",
                                url: "/files/summernote", // div上的action
                                cache: false,
                                contentType: false,
                                processData: false,

                                // 成功时调用方法，后端返回json数据
                                success: function (response) {

                                    console.log(response);

                                    if (response.code == 0) {

                                        // editor.insertImage($editable, '../' + response.path);
                                        $("#summernote1").summernote('insertImage',
                                            '../' + response.path);
                                    }
                                },
                                // ajax请求失败时处理
                                error: function () {
                                    alert("上传失败！")
                                }
                            });



                        }
                    }
                });

                $('#summernote1').summernote('fontSize', 20);

            },
        },
        mounted: function () {

            var _self = this;
          



            this.getEnote();
            this.queryEdetail();
            this.initSummernote();

            // $('#summernote1').summernote('disable');
        }
    })
</script>